<template>
  <!--服务管理-->
  <div class="addManagement">
    <tmpHeader/>
    <div class="addManag">
      <div class="main">
        <p class="title">查看</p>
        <div class="fuwu">
          <!--线上服务-->
          <div class="xsfw" v-for="(item,index) of allServerList" :key='index'>
            <p>{{ item.name }}</p>
            <!--第一行-->
            <div class="select_wufu" ref="all">
              <template v-if="editFlag">
                <div v-for="(items,index) in item.result" :key='index'>
                  <input
                    type="checkbox"
                    :value="items.packageId"
                    :checked="items.selected == 1"
                    :data-id="items.packageId"
                    :id="'a' + items.packageId"
                  >
                  <label :for="'a' + items.packageId">{{ items.packageName }}</label>
                </div>
              </template>
              <template v-else-if="!editFlag">
                <div v-if="items.selected == 1" v-for="(items,index) in item.result">
                  <label :for="'a' + items.packageId">{{ items.packageName }}</label>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
      <!--保存-->
      <div class="expert_save">
        <Button type="primary" v-if="editFlag" @click="save" style="width:75px;height:35px;">
          <Icon type="ios-checkmark" style="margin-right: 5px" />保存</Button>
        <Button type="primary" v-if="!editFlag" @click="toEdit" style="width:75px;height:35px;">
          <Icon type="ios-checkmark" style="margin-right: 5px" />编辑</Button>
        <Button v-if="editFlag" @click="toDetail" style="width:75px;height:35px;">
          <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消</Button>
        <Button @click="reback" style="width:75px;height:35px;">
          <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>返回</Button>
      </div>
    </div>
  </div>
</template>

<script>
import tmpHeader from "@/pages/organizat/contentmen/tmpHeader";
import api from "@/api/commonApi";
export default {
  data() {
    return {
      arr: [],
      allServiceList: [],
      docServiceList: [],
      hospitalId: sessionStorage.getItem("hospitalId"),
      editFlag: false
    };
  },
  components: {
    tmpHeader
  },
  created() {
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "/index/operation/mechanism/index",
        title: "机构运营"
      },
      {
        path: "/index/operation/home",
        title: "机构配置管理"
      }
    ];
    this.$emit("changeBreadList", breadList);
  },  
  mounted() {
    //查询当前医院可以添加的所有服务包
    this.$axios
      .post(api.getAllPackageList, {
        hospitalId: this.hospitalId
      })
      .then(res => {
        if (res.data.success) {
          let ret = res.data.object[0];
          let proList = {
            name: "省",
            result: []
          };
          if (ret.listPro) {
            ret.listPro.map((el, i) => {
              proList.result.push(el);
            });
          }
          let cityList = {
            name: "市",
            result: []
          };
          if (ret.listCity) {
            ret.listCity.map((el, i) => {
              cityList.result.push(el);
            });
          }
          let areaList = {
            name: "区",
            result: []
          };
          if (ret.listArea) {
            ret.listArea.map((el, i) => {
              areaList.result.push(el);
            });
          }
          let orgList = {
            name: "上级",
            result: []
          };
          console.log(ret.listOrg)
          if (ret.listOrg) {
            ret.listOrg.map((el, i) => {
              orgList.result.push(el);
            });
          }
          let hosList = {
            name: "当前",
            result: []
          };
          if (ret.listHos) {
            ret.listHos.map((el, i) => {
              hosList.result.push(el);
            });
          }
          this.allServiceList.push(proList);
          this.allServiceList.push(cityList);
          this.allServiceList.push(areaList);
          this.allServiceList.push(orgList);
          this.allServiceList.push(hosList);
        } else {
          this.$Message.info("查询失败,请重试");
        }
      })
      .catch(err => {
        console.log(err);
      });
    //获得本院服务包信息  
    this.$axios
      .post(api.getDhtbfFdsbyHospitalId, {
        hospitalId: this.hospitalId
      })
      .then(res => {
        let ret = res.data.object;
        if (ret) {
          ret.map(el => {
            this.docServiceList.push(el.id);
          });
        }
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    toEdit() {
      this.editFlag = true;
    },
    toDetail() {
      this.editFlag = false;
    },
    btn() {},
    save() {
      let wrap = document.getElementsByClassName("addManag")[0];
      let el = wrap.getElementsByTagName("input");
      let len = el.length;
      let arr = [];
      for (let i = 0; i < len; i++) {
        if (el[i].checked) {
          arr.push(parseInt(el[i].getAttribute("data-id")));
        }
      }
      let parmas = {
          hospitalId: this.hospitalId,
          packageId: arr
      }
      console.log(JSON.stringify(parmas))
      this.$axios
        .post(api.updateServicePackage, parmas)
        .then(res => {
          if (res.data.code) {
            this.$Message.info("操作成功");
            setTimeout(() => {
              this.functionJS.queryNavgationTo(
                this,
                "/index/organizat/contentmen/servicepackage/list",
                {
                  // 公用方法
                }
              );
            }, 500);
          }
        });
    },
    reback() {
      this.functionJS.queryNavgationTo(
        this,
        "/index/organizat/contentmen/servicepackage/list"
      );
      // 公用方法
    }
  },
  // 数据更新后的DOM结构
  updated() {
    let wrap = document.getElementsByClassName("addManag")[0];
    let el = wrap.getElementsByTagName("input");
    let len = el.length;
    let arr = [];
    for (let i = 0; i < len; i++) {
      if (el[i].checked) {
        arr.push(el[i]);
      }
    }
  },
  computed: {
    allServerList() {
      for (let i = 0; i < this.allServiceList.length; i++) {
        //循环获取result
        for (let j = 0; j < this.allServiceList[i].result.length; j++) {
          //循环result对比packageId
          let index = this.docServiceList.indexOf(
            this.allServiceList[i].result[j].packageId
          );
          if (index != -1) {
            this.allServiceList[i].result[j].selected = 1;
          } else {
            this.allServiceList[i].result[j].selected = 0;
          }
        }
      }
      console.log(this.allServiceList)
      return this.allServiceList;
    }
  },
};
</script>

<style scoped lang="less">
.addManagement {
  width: calc(100%);
  padding: 10px 30px;
  margin: 0 auto;
  background: #fff;
  .addManag {
    display: flex;
    flex-direction: column;
    padding: 20px;
    h4 {
      padding-left: 4px;
      border-left: 2px solid #5362e1;
    }
    .fuwu {
      width: calc(100% - 100px);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid rgb(242, 242, 242);
      .xsfw {
        margin: 10px 0;
        .select_wufu {
          margin: 0 30px;
          display: flex;
          flex-direction: row;
          padding: 14px 20px;
          align-items: center;
          flex-wrap: wrap;
          div {
            width: 20%;
            margin: 10px 20px;
            display: flex;
            flex-direction: row;
            align-items: center;
            input {
              outline: none;
              border: none;
            }
            label {
              user-select: none;
            }
          }
        }
      }
    }
    .expert_save {
      text-align: center;
      height: 50px;
      margin: 10px auto;
    }
  }
  .main{
        margin-top:10px;
        border: 1px solid #f0f0f0;               
        .title {
            font-size: 20px;
            padding-left: 15px;
            margin-bottom: 20px;
            color: #333;
            height: 40px;
            line-height: 40px;
            background: #ebedf8;         
        }          
    }   
}
</style>